<template>
	<view class="dlbox">
		<view class="clearfloat">
			<view class="tititem" :class="item.ch ? 'tititem_ch' : ''" v-for="(item,i) in list" @click="chzt(i)">
				{{item.name}}
			</view>
		</view>
		<!-- 注册 -->
		<view v-if="dltype == 0">
			<view class="zztit">
				Suporta apenas Conta Registro
			</view>
			<view class="inpbox bj_between">
				<view class="bj_left">
					<image src="/static/gc/1.png" class="inpico" mode="widthFix"></image>
					<input type="text" value="" placeholder="Digite o Conta" maxlength="50" />
				</view>
			</view>
			<view class="inpbox bj_between">
				<view class="bj_left">
					<image src="/static/gc/2.png" class="inpico" mode="widthFix"></image>
					<input placeholder="Inserir Senha" :password="Password" maxlength="50" />
				</view>
				<image :src="Password ? '/static/gc/6.png' : '/static/gc/3.png'" style="width: 48rpx;" mode="widthFix"
					@click="showpass"></image>
			</view>
			<!-- 分隔线 -->
			<view class="f36 fwb bj_between" style="margin-bottom: 40rpx;">
				<text>Força</text>
				<image src="/static/gc/7.png" style="width: 434rpx;" mode="widthFix"></image>
			</view>
			<view class="inpbox bj_left">
				<view class="bj_left"
					style="border-right: 2rpx solid #606266;padding-right: 12rpx;margin-right: 20rpx;">
					<image src="/static/gc/4.png" class="inpico" mode="widthFix"></image>
					<view style="width: 68rpx;">{{form.gj}}</view>
					<image src="/static/gc/8.png" style="width: 20rpx;" mode="widthFix"></image>
				</view>
				<input type="tel" v-model="form.tel" placeholder="Digite o Celular" />
			</view>
			<view class="inpbox bj_between">
				<view class="bj_left">
					<image src="/static/gc/5.png" class="inpico" mode="widthFix"></image>
					<input type="text" value="" placeholder="BRL ( BRL )" maxlength="50" />
				</view>
			</view>
			<!-- 协议 -->
			<view class="bj_between" style="margin-bottom: 60rpx;" @click="chxy">
				<view class="chbox">
					<image src="/static/gc/c1.png" mode="widthFix" v-if="xytag"></image>
				</view>
				<view class="">
					<text style="color: #303133;font-size: 18rpx;">Tenho 18 anos,li e concordo com</text>
					<text style="color: #BF5B04;font-size: 18rpx;">《Contrato do usuário》</text>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="dlbtn">
				Registro
			</view>

			<view class="bj_between f24" style="color: #303133;margin-top: 40rpx;">
				<text>Suporte ao cliente</text>
				<text>Jogar Grátis</text>
			</view>

		</view>

		<!-- 登录 -->
		<view v-if="dltype == 1">
			<view class="zztit">
				Suporte Número do Celular/Conta Login
			</view>
			<view class="inpbox bj_between">
				<view class="bj_left">
					<image src="/static/gc/1.png" class="inpico" mode="widthFix"></image>
					<input type="text" value="" placeholder="Digite o Conta" maxlength="50" />
				</view>
			</view>
			<view class="inpbox bj_between">
				<view class="bj_left">
					<image src="/static/gc/2.png" class="inpico" mode="widthFix"></image>
					<input placeholder="Inserir Senha" :password="Password" maxlength="50" />
				</view>
				<image :src="Password ? '/static/gc/6.png' : '/static/gc/3.png'" style="width: 48rpx;" mode="widthFix"
					@click="showpass"></image>
			</view>
			<!-- 协议 -->
			<view class="bj_left" style="margin-bottom: 60rpx;" @click="chxy">
				<view class="chbox" style="margin-right: 20rpx;">
					<image src="/static/gc/c1.png" mode="widthFix" v-if="xytag"></image>
				</view>
				<view class="">
					<text style="color: #303133;font-size: 18rpx;">Lembre-se da senha da conta</text>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="dlbtn">
				Login
			</view>
			
			<view class="bj_between f24" style="color: #303133;margin-top: 40rpx;">
				<text>Suporte ao cliente</text>
				<text>Jogar Grátis</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	let dltype = ref(0)
	let xytag = ref(false)
	const props = defineProps({
		tag: {
			type: Number,
			default: 0
		}
	});

	let Password = ref(true)

	let list = ref([{
			name: "Registro",
			ch: true
		},
		{
			name: "Login",
			ch: false
		}
	])

	let form = ref({
		gj: "+55",
		tel: ""
	})

	onShow(function() {
		if (props.tag == 1) {
			chzt(1)
		} else {
			chzt(0)
		}
	})



	// 注册父级可调用的方法
	defineExpose({
		chzt
	})

	function showpass() {
		if (Password.value) {
			Password.value = false
		} else {
			Password.value = true
		}
	}




	function chzt(v) {
		dltype.value = v
		for (var i = 0; i < list.value.length; i++) {
			list.value[i].ch = false
		}
		list.value[v].ch = true
	}

	function chxy() {
		if (xytag.value) {
			xytag.value = false
		} else {
			xytag.value = true
		}
	}
</script>

<style scoped lang="scss">
	.dlbox {
		width: 660rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 38rpx 50rpx 60rpx;
		-webkit-animation: dh_1d 0.2s 1 linear;
		animation: dh_1d 0.2s 1 linear;
		animation-fill-mode: forwards;
		transform: scale(0);

		.tititem {
			float: left;
			width: 50%;
			font-size: 28rpx;
			color: #303133;
			border-bottom: 2rpx solid #fff;
			padding-bottom: 12rpx;
			text-align: center;
			font-weight: bold;
		}

		.tititem_ch {
			color: #6C3643;
			border-bottom: 2rpx solid #6C3643;
		}

		.zztit {
			margin-top: 40rpx;
			font-size: 28rpx;
			color: #303133;
			margin-bottom: 20rpx;
		}

		.inpbox {
			height: 80rpx;
			background: #F0F0F0;
			border-radius: 12rpx;
			border: 2rpx solid rgba(48, 49, 51, 0.1);
			margin-bottom: 30rpx;
			padding: 0 30rpx 0 22rpx;

			.inpico {
				width: 48rpx;
				margin-right: 26rpx;
			}

			input {
				font-size: 28rpx;
				color: #606266;
			}
		}

		.chbox {
			position: relative;
			width: 36rpx;
			height: 36rpx;
			border: 2rpx solid rgba(48, 49, 51, 0.1);
			border-radius: 12rpx;

			image {
				width: 36rpx;
				position: absolute;
				left: 0;
				top: 0;
			}
		}

		.dlbtn {
			height: 80rpx;
			background: #6C3643;
			border-radius: 12rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 28rpx;
			color: #FFFFFF;
		}

	}
</style>